/*!
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@keyframes spectrum-fills-rotate {
    0% {
        transform: rotate(-90deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

@keyframes spectrum-dashoffset-animation {
    0%,
    100% {
        stroke-dashoffset: 75px;
    }

    30% {
        stroke-dashoffset: 20px;
    }
}

:host {
    display: inline-block;
}

.spectrum-ProgressCircle {
    --spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
    --spectrum-progress-circle-fill-border-color: var(
        --spectrum-accent-content-color-default
    );
    --spectrum-progress-circle-size: var(
        --spectrum-progress-circle-size-medium
    );
    --spectrum-progress-circle-thickness: var(
        --spectrum-progress-circle-thickness-medium
    );
}

.spectrum-ProgressCircle--sizeS {
    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
    --spectrum-progress-circle-thickness: var(
        --spectrum-progress-circle-thickness-small
    );
}

.spectrum-ProgressCircle--sizeL {
    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
    --spectrum-progress-circle-thickness: var(
        --spectrum-progress-circle-thickness-large
    );
}

.spectrum-ProgressCircle {
    display: inline-block;
    inline-size: var(--spectrum-progress-circle-size);
    block-size: var(--spectrum-progress-circle-size);
    position: relative;
    direction: ltr;
    transform: translateZ(0);
}

.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
    --spectrum-progress-circle-track-border-color: var(
        --spectrum-static-white-track-color
    );
    --spectrum-progress-circle-fill-border-color: var(
        --spectrum-static-white-track-indicator-color
    );
}

.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack {
    --spectrum-progress-circle-track-border-color: var(
        --spectrum-static-black-track-color
    );
    --spectrum-progress-circle-fill-border-color: var(
        --spectrum-static-black-track-indicator-color
    );
}

.spectrum-ProgressCircle-fill,
.spectrum-ProgressCircle-track {
    box-sizing: border-box;
    inline-size: var(--spectrum-progress-circle-size);
    block-size: var(--spectrum-progress-circle-size);
}

.spectrum-ProgressCircle-track {
    stroke-width: var(--spectrum-progress-circle-thickness);
    stroke: var(
        --highcontrast-progress-circle-track-color,
        var(--spectrum-progress-circle-track-border-color)
    );
}

.spectrum-ProgressCircle-fill {
    stroke-width: var(--spectrum-progress-circle-thickness);
    stroke: var(
        --highcontrast-progress-circle-fill-border-color,
        var(--spectrum-progress-circle-fill-border-color)
    );
    transform: rotate(-90deg);
    transform-origin: center;
}

.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill {
    will-change: transform;
    animation:
        spectrum-fills-rotate 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite,
        spectrum-dashoffset-animation 1s cubic-bezier(0.25, 0.1, 0.25, 1.3)
            infinite;
    transform-origin: center;
}

@media (forced-colors: active) {
    .spectrum-ProgressCircle {
        --highcontrast-progress-circle-fill-border-color: Highlight;
        --highcontrast-progress-circle-track-color: Background;
    }

    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
        .spectrum-innerCircle {
        stroke: CanvasText;
    }

    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
        .spectrum-outerCircle {
        border: 1px solid CanvasText;
        border-radius: 50%;
    }
}

slot {
    display: none;
}
